<template>
  <div class="register">
    <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
      <div class="title-box">
        <h3 class="title">养老院管理系统</h3>
        <lang-select />
      </div>
      <el-form-item v-if="tenantEnabled" prop="tenantId">
        <el-select v-model="registerForm.tenantId" filterable :placeholder="proxy.$t('register.selectPlaceholder')" style="width: 100%">
          <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
          <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
        </el-select>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('register.username')">
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="proxy.$t('register.password')"
          @keyup.enter="handleRegister"
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          size="large"
          auto-complete="off"
          :placeholder="proxy.$t('register.confirmPassword')"
          @keyup.enter="handleRegister"
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="captchaEnabled" prop="code">
        <el-input
          v-model="registerForm.code"
          size="large"
          auto-complete="off"
          :placeholder="proxy.$t('register.code')"
          style="width: 63%"
          @keyup.enter="handleRegister"
        >
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="register-code">
          <img :src="codeUrl" class="register-code-img" @click="getCode" />
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleRegister">
          <span v-if="!loading">{{ proxy.$t('register.register') }}</span>
          <span v-else>{{ proxy.$t('register.registering') }}</span>
        </el-button>
        <div style="float: right">
          <router-link class="link-type" :to="'/login'">{{ proxy.$t('register.switchLoginPage') }}</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-register-footer">
      <span>基于Spring　Ｂｏｏｔ的养老院管理系统的设计与实现</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCodeImg, register, getTenantList } from '@/api/login';
import { RegisterForm, TenantVO } from '@/api/types';
import { to } from 'await-to-js';
import { useI18n } from 'vue-i18n';
import { Check } from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const router = useRouter();

const { t } = useI18n();

const registerForm = ref<RegisterForm>({
  tenantId: '',
  username: '',
  password: '',
  confirmPassword: '',
  code: '',
  uuid: '',
  userType: 'sys_user'
});

// 租户开关
const tenantEnabled = ref(true);

const equalToPassword = (rule: any, value: string, callback: any) => {
  if (registerForm.value.password !== value) {
    callback(new Error(t('register.rule.confirmPassword.equalToPassword')));
  } else {
    callback();
  }
};

const registerRules: ElFormRules = {
  tenantId: [{ required: true, trigger: 'blur', message: t('register.rule.tenantId.required') }],
  username: [
    { required: true, trigger: 'blur', message: t('register.rule.username.required') },
    { min: 2, max: 20, message: t('register.rule.username.length', { min: 2, max: 20 }), trigger: 'blur' }
  ],
  password: [
    { required: true, trigger: 'blur', message: t('register.rule.password.required') },
    { min: 5, max: 20, message: t('register.rule.password.length', { min: 5, max: 20 }), trigger: 'blur' },
    { pattern: /^[^<>"'|\\]+$/, message: t('register.rule.password.pattern', { strings: '< > " \' \\ |' }), trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, trigger: 'blur', message: t('register.rule.confirmPassword.required') },
    { required: true, validator: equalToPassword, trigger: 'blur' }
  ],
  code: [{ required: true, trigger: 'change', message: t('register.rule.code.required') }]
};
const codeUrl = ref('');
const loading = ref(false);
const captchaEnabled = ref(true);
const registerRef = ref<ElFormInstance>();
// 租户列表
const tenantList = ref<TenantVO[]>([]);

const handleRegister = () => {
  registerRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true;
      const [err] = await to(register(registerForm.value));
      if (!err) {
        const username = registerForm.value.username;
        await ElMessageBox.alert(
          `<div style="text-align: center;">
            <i class="el-icon-success" style="color: #67b26f; font-size: 48px; margin-bottom: 15px; display: block;"></i>
            <div style="font-size: 24px; color: #67b26f; margin-bottom: 10px; font-weight: 500;">注册成功</div>
            <div style="color: #606266; font-size: 16px; margin-bottom: 5px;">欢迎加入养老院管理系统</div>
            <div style="color: #909399; font-size: 14px;">您的账号 ${username} 已成功注册</div>
          </div>`,
          {
            dangerouslyUseHTMLString: true,
            showClose: false,
            confirmButtonText: '立即登录',
            customClass: 'custom-message-box',
            confirmButtonClass: 'custom-confirm-button'
          }
        );
        await router.push('/login');
      } else {
        loading.value = false;
        if (captchaEnabled.value) {
          getCode();
        }
      }
    }
  });
};

const getCode = async () => {
  const res = await getCodeImg();
  const { data } = res;
  captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
  if (captchaEnabled.value) {
    codeUrl.value = 'data:image/gif;base64,' + data.img;
    registerForm.value.uuid = data.uuid;
  }
};

const initTenantList = async () => {
  const { data } = await getTenantList(false);
  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
  if (tenantEnabled.value) {
    tenantList.value = data.voList;
    if (tenantList.value != null && tenantList.value.length !== 0) {
      registerForm.value.tenantId = tenantList.value[0].tenantId;
    }
  }
};

onMounted(() => {
  getCode();
  initTenantList();
});
</script>

<style lang="scss" scoped>
.register {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  background-image: url('../assets/images/login-background-ms.jpg');
  background-size: cover;
  background-position: left center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(103,178,111,0.1) 100%);
    z-index: 1;
    animation: gradientShift 15s ease infinite;
  }

  .register-form {
    margin-right: 2%;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    padding: 45px 50px;
    width: 480px;
    box-shadow: 0 8px 32px rgba(103,178,111, 0.15);
    animation: slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
    backdrop-filter: blur(8px);

    &:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(103,178,111, 0.2);
      background: rgba(255, 255, 255, 0.9);
    }

    .el-input {
      height: 50px;
      margin-bottom: 8px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

      input {
        height: 50px;
        border-radius: 12px;
        transition: all 0.3s ease;
        border: 2px solid #e8f5e9;
        font-size: 16px;
        padding-left: 45px;

        &:focus {
          border-color: #67b26f;
          box-shadow: 0 0 15px rgba(103,178,111, 0.2);
          transform: translateY(-2px);
        }
      }
    }

    .input-icon {
      height: 50px;
      width: 18px;
      margin-left: 15px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      opacity: 0.7;
      color: #67b26f;
      font-size: 18px;
    }

    .el-input:focus-within {
      transform: translateY(-2px);

      .input-icon {
        transform: scale(1.2) rotate(5deg);
        opacity: 1;
      }
    }

    .el-button {
      height: 50px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      background: linear-gradient(45deg, #67b26f, #4ca2cd);
      border: none;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      font-size: 18px;
      letter-spacing: 2px;

      &:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 20px rgba(103,178,111, 0.3);
        background: linear-gradient(45deg, #4ca2cd, #67b26f);
      }
    }
  }
}

.title-box {
  display: flex;
  margin-bottom: 45px;
  position: relative;

  .title {
    margin: 0 auto;
    text-align: center;
    color: #67b26f;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    animation: fadeInDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 3px;

    &::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      width: 80px;
      height: 4px;
      background: linear-gradient(45deg, #67b26f, #4ca2cd);
      transform: translateX(-50%) scaleX(0);
      animation: lineExpand 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s;
    }
  }

  :deep(.lang-select--style) {
    line-height: 0;
    color: #67b26f;
  }
}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 50px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    &:hover {
      transform: scale(1.08) rotate(2deg);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
  }
}

.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  animation: fadeIn 1s ease-out;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
  backdrop-filter: blur(5px);
  padding: 0 20px;
}

.register-code-img {
  height: 50px;
  padding-left: 12px;
}

.link-type {
  color: #67b26f;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
  font-size: 15px;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #67b26f, #4ca2cd);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  &:hover {
    color: #4ca2cd;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    &::after {
      transform: scaleX(1);
    }
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
  60% {
    transform: translateX(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lineExpand {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

:deep(.custom-message-box) {
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(103,178,111, 0.15);
  border: none;
  width: 400px;

  .el-message-box__header {
    display: none;
  }

  .el-message-box__content {
    padding: 0;
    margin: 0;
  }

  .el-message-box__container {
    margin: 0;
  }

  .el-message-box__status {
    position: static;
    transform: none;
    font-size: 48px;
    margin-right: 0;
  }

  .el-message-box__message {
    padding: 0;
    margin: 0;
  }
}

:deep(.custom-confirm-button) {
  width: 100%;
  margin-top: 20px;
  height: 44px;
  background: linear-gradient(45deg, #67b26f, #4ca2cd);
  border: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(103,178,111, 0.3);
    background: linear-gradient(45deg, #4ca2cd, #67b26f);
  }

  &:active {
    transform: translateY(0);
  }
}
</style>
